<template>
    <div class="policy">
        <search :searchKey.sync="searchKey" 
                enterButton="搜索政策"
                placeholder="输入你感兴趣的政策名或关键字"
                @search="search()"/>
        <div class="policy-container animated fadeInRight">
            <h2 class="policy-title">- 政策分布 -</h2>
            <div class="left-footer"><Icon type="logo-buffer"  size="18"/> 全球各国政策分布</div>
            <div class="s1">
                <div id="map"></div>
                <Timeline class="timeline" pending>
                    <TimelineItem v-for="item in timeline" :key="item.id">
                        <p class="time"><Icon type="md-pin" /> <a :href="item.wang_zhi" target="_blank" style="color:#4eadca">{{item.bu_men}}</a></p>
                        <Tooltip max-width="500" :content="item.jian_jie">
                            <p>《{{item.zheng_ce_ming_cheng}}》</p>
                        </Tooltip>
                    </TimelineItem>
                    <TimelineItem><a style="color:#4eadca" @click="scrollTo()">查看更多</a></TimelineItem>
                </Timeline>
            </div>
        </div>
        <div class="rdzc">
            <div>
                <div class="title">
                    <Icon type="md-apps" size="35" color="#999"></Icon><h3 style="margin-left:10px;font-size:18px">热点政策</h3>
                </div>
                <Divider style="margin-top:15px;background-color:#ccc"  />
                <div class="rdzc-list">
                    <div v-for="item in rdzc" :key="item.title">
                        <div style="height:200px;overflow:hidden;border-bottom:2px solid #83a2f1"><img :src="item.logo" alt=""></div>
                        <div class="country"><Icon type="md-locate" size="16" /> {{item.guo_jia}}</div>
                        <Button class="rdzc-btn"><Icon type="ios-flame" size="18"/> 热点政策</Button>
                        <h2>{{item.zheng_ce_ming_cheng}}</h2>
                        <p>{{item.jian_jie}}</p>
                        <Button class="readmore"><a :href="item.wang_zhi" target="_blank" style="color:white">了解详情</a></Button>
                    </div>
                </div>
            </div>
        </div>
        <div class="policy-list">
            <div class="title">
                <Icon type="md-apps" size="35" color="#999"></Icon><h3 style="margin-left:10px;font-size:18px">
                全部政策
                <span style="color:#888;font-weight:normal;font-size:15px;margin-left:30px" v-if="title"> > {{title}}</span>
                </h3>
                <Icon type="md-exit" size="35" color="#bbb" class="drawer-icon" @click="showDrawer()"/>
            </div>
            <Divider style="margin-top:15px;background-color:#ccc"  />
            <div class="policy-div" @click="hiddenDrawer()">
                <div class="policy-select animated fadeIn" :style="show&&'display:block'">
                    <div class="animated  fadeInLeft" @click="select($event,'zheng_ce_lei_xing',0)">
                        <h2><Icon type="ios-paper" size="22" /> 政策类型</h2>
                        <p class="select-active">全部</p>
                        <p>政策文件</p>
                        <p>报告</p>
                        <p>文件</p>
                        <p>国家计划</p>
                        <p>计划</p>
                    </div>
                    <div class="animated fadeInLeft" @click="select($event,'guo_jia',0)">
                        <h2><Icon type="md-pin" size="22" /> 国家</h2>
                        <p class="select-active">全部</p>
                        <p>中国</p>
                        <p>印度</p>
                        <p>德国</p>
                        <p>新加坡</p>
                        <p>日本</p>
                        <p>欧盟</p>
                        <p>法国</p>
                        <p>澳大利亚</p>
                        <p>美国</p>
                        <p>联合国</p>
                        <p>英国</p>
                        <p>韩国</p>
                    </div>
                    <div class="animated fadeInLeft" @click="select($event,'bu_men',0)">
                        <h2><Icon type="ios-home" size="22" /> 机构</h2>
                        <p class="select-active">全部</p>
                        <p>国务院</p>
                        <p>教育部</p>
                    </div>
                    <div class="animated fadeInLeft" @click="select($event,'guan_jian_ci',6)">
                        <h2><Icon type="ios-keypad" size="22" /> 主题</h2>
                        <p class="select-active">全部</p>
                        <p>教育信息化</p>
                        <p>教育现代化</p>
                        <p>大数据</p>
                        <p>人工智能</p>
                        <p>在线教育</p>
                        <p>教育评价</p>
                        <p>三个课题</p>
                        <p>教师教育</p>
                        <p>教育新基建</p>
                        <p>双减</p>
                    </div>
                    <div class="animated fadeInLeft" @click="select($event,'ceng_ci',6)">
                        <h2><Icon type="md-school" size="22" /> 层次</h2>
                        <p class="select-active">全部</p>
                        <p>基础教育</p>
                        <p>高等教育</p>
                        <p>职业教育</p>
                    </div>
                </div>

                <!-- 骨架屏 -->
                <el-skeleton animated :loading="loading" class="policy-content" :style="loading&&'width:100%'">
                    <template slot="template">
                    <div v-for="(item,index) in 5" :key="index">
                        <div>
                            <el-skeleton-item variant="text" style="width:33%;height:30px;"  />
                            <el-skeleton-item variant="text" style="width:33%;height:30px;margin-left:1%"  />
                            <el-skeleton-item variant="text" style="width:30px;height:30px;margin-left:1%;border-radius:50%"  />
                            <el-skeleton-item variant="text" style="width:95%;height:130px;"  />
                            <el-skeleton-item variant="text" style="width:15%;height:30px;"  />
                            <el-skeleton-item variant="text" style="width:15%;height:30px;margin-left:1%"  />
                            <el-skeleton-item variant="text" style="width:15%;height:30px;margin-left:1%"  />
                            <el-skeleton-item variant="text" style="width:95%;height:20px"  />
                            <el-skeleton-item variant="text" style="width:95%;height:20px"  />
                            <el-skeleton-item variant="text" style="width:95%;height:20px"  />
                        </div>
                        <Divider style="margin-top:15px;background-color:#ccc"  />
                    </div>
                    </template>
                </el-skeleton>

                <div v-if="!totalPages&&!loading" style="text-align:center;width:100%" class="animated fadeIn"  >
                    <img src="../assets/noresult.svg" alt="" width="200px" height="175px">
                    <br>
                    <span style="margin-right:0;margin-top:20px;font-size:18px">暂时没有结果，换一些关键词试试吧~</span>
                </div>
                <div class="policy-content" v-if="!loading">
                    <div v-for="item in pageInfo" :key="item.id">
                        <div class="policy-title" style="display:inline-block;margin-right:10px;margin-bottom:0px" v-html="highlightHTML(item.zheng_ce_ming_cheng,searchKey)"></div><span class="title-span" style="display:inline-block">{{item.zheng_ce_ceng_ji}}</span>
                        <div class="policy-info">{{item.jian_jie}}</div>
                        <div class="policy-keyword">
                            <Button v-for="(keyword,index) in item.guan_jian_ci.split(/[,，;；]/)" :key="index" @click="searchByTag(keyword)">{{keyword}}</Button>
                        </div>
                        <div class="policy-line1">
                            <span><Icon type="md-expand" /> 类型：{{item.zheng_ce_lei_xing}}</span>
                            <span><Icon type="md-time" /> 发布时间：{{item.chu_tai_shi_jian}}</span>
                            <span><Icon type="md-globe" /> 机构：{{item.bu_men}}</span>
                        </div>
                        <div class="policy-line2">
                            <span><Icon type="md-list-box" size="18" /> 发文号：{{item.fa_wen_hao}}</span>
                            <span><Icon type="md-school" size="18" /> 教育层次：{{item.ceng_ci}}</span>
                        </div>
                        <div class="policy-line3">
                            <span><Icon type="md-pin" size="18" /> 国家：{{item.guo_jia}}</span> 
                            <span style="float:right;margin-right:10px"><Icon type="ios-link" size="17" color="#2d8cf0" /><a :href="item.wang_zhi" target="_blank"> 政策来源</a></span>
                        </div>
                        <Divider style="margin-top:15px;background-color:#ccc"  />
                    </div>
                    <Page v-if="totalPages" :total="totalPages" class="pages" :current="pageNumber" :page-size="6" @on-change="getPageInfo"/>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import search from '../components/topSearch.vue';
    import policyService from '@/service/t_policy';
    import utils from '../utils/utils'
    export default {
        components:{search},
        data() {
            return {
                searchKey:'',
                loading:true,
                active:1,
                show:false,
                policies_height:0,
                pageNumber:1,
                title:'',
                timeline: [{
                    timeInfo: '2021-08-02 教育部等五部门',
                    title: '《关于全面加强和改进新时代学校卫生与健康教育工作的意见》',
                    content: '意见提出，2025年，政府主导、部门协作、学校实施、社会参与的新时代学校卫生与健康教育工作格局更加完善。学校健康教育时间切实保证，健康教育教学效果明显提升。办学条件达到国家学校卫生基本标准。学校应对突发公共卫生事件预测研判、精准管控、应急处置等能力显著增强。学生健康素养普遍提高，防病意识和健康管理能力显著增强，体质健康水平明显提升。2035年，学校卫生条件、体育设施、健康教育和健康素养水平基本实现现代化，达到建成教育强国和健康中国要求，形成高质量的新时代学校卫生与健康教育体系。'
                }, {
                    timeInfo: '2021-07-24 国务院',
                    title: '《关于进一步减轻义务教育阶段学生作业负担和校外培训负担的意见》',
                    content: '意见提出，学校教育教学质量和服务水平进一步提升，作业布置更加科学合理，学校课后服务基本满足学生需要，学生学习更好回归校园，校外培训机构培训行为全面规范。学生过重作业负担和校外培训负担、家庭教育支出和家长相应精力负担1年内有效减轻、3年内成效显著，人民群众教育满意度明显提升。'
                }, {
                    timeInfo: '2021-07-05 工业和信息化部等十部门',
                    title: '《5G应用“扬帆”行动计划（2021-2023年）》',
                    content: '提出发展“5G+智慧教育”。加快5G教学终端设备及AR/VR教学数字内容的研发，结合AR/VR、全息投影等技术实现场景化交互教学，打造沉浸式课堂。推动5G技术对教育专网的支撑，结合具体应用场景，研究制订网络、应用、终端等在线教育关键环节技术规范。加大5G在智慧课堂、全息教学、校园安防、教育管理、学生综合评价等场景的推广，提升教学、管理、科研、服务等各环节的信息化能力。'
                }, {
                    timeInfo: '2021-07-01 教育部等六部门',
                    title: '《关于推进教育新型基础设施建设构建高质量教育支撑体系的指导意见》',
                    content: '意见提出，到2025年，基本形成结构优化、集约高效、安全可靠的教育新型基础设施体系，并通过迭代升级、更新完善和持续建设，实现长期、全面的发展。建设教育专网和“互联网+教育”大平台，为教育高质量发展提供数字底座。汇聚生成优质资源，推动供给侧结构性改革。建设物理空间和网络空间相融合的新校园，拓展教育新空间。开发教育创新应用，支撑教育流程再造、模式重构。提升全方位、全天候的安全防护能力，保障广大师生切身利益。'
                }, {
                    timeInfo: '2021-06-23 教育部 国家发展改革委 财政部',
                    title: '《关于深入推进义务教育薄弱环节改善与能力提升工作的意见》',
                    content: '主要目标：2021—2025年，城镇学校学位供给满足学生入学需求，全国义务教育阶段56人以上大班额比例进一步降低；学生寄宿需求基本得到满足，学校教学生活条件持续改善；教育信息化应用水平明显提升；体育、美育、劳动教育条件得到有效保障；校园文化建设不断加强，良好的育人氛围更加浓厚。'
                },{
                    timeInfo: '2021-06-23 教育部 国家发展改革委 财政部',
                    title: '《关于深入推进义务教育薄弱环节改善与能力提升工作的意见》',
                    content: '主要目标：2021—2025年，城镇学校学位供给满足学生入学需求，全国义务教育阶段56人以上大班额比例进一步降低；学生寄宿需求基本得到满足，学校教学生活条件持续改善；教育信息化应用水平明显提升；体育、美育、劳动教育条件得到有效保障；校园文化建设不断加强，良好的育人氛围更加浓厚。'
                }],
                rdzc:[{
                    imgsrc:require('../assets/rdzc1.jpg'),
                    country:'美国',
                    title:'Preparing for the Future of Aritificial Intelligence',
                    content:'为了帮助美国为人工智能（AI）在未来发挥更大作用的未来做好准备，报告调查了AI的现状，其现有和潜在应用以及进步对社会和公共政策提出的问题 在AI中。 报告还建议联邦机构和其他行为者采取进一步的具体行动。 一份名为《国家人工智能研究与开发战略计划》的配套文件为联邦资助的AI研究与开发提出了战略计划。'
                },{
                    imgsrc:require('../assets/rdzc2.jpg'),
                    country:'英国',
                    title:'Growing the artificial intelligence industry in the UK',
                    content:'对当前人工智能的应用、市场和政策支持进行了分析，从数据获取、人才培养、研究转化和行业发展四方面提出了促进英国AI产业发展的重要行动建议。' 
                },{
                    imgsrc:require('../assets/rdzc3.png'),
                    country:'法国',
                    title:'French Intelligence Artificielle',
                    content:'将重点结合医疗、汽车、能源、金融、航天等法国较有优势的行业来研发人工智能技术，并宣布到2020年将投资15亿欧元用于开发人工智能研究，为法国人工智能技术研发创造更好的综合环境。' 
                }],
                pageInfo:[],
                totalPages:0,
                //左侧搜索栏检索index
                zheng_ce_lei_xing:null,
                guo_jia:null,
                bu_men:null,
                guan_jian_ci:null,
                ceng_ci:null,
            }
        },
        computed:{
            filter_params(){
                let arr = [];
                if(this.searchKey){
                    arr.push(["zheng_ce_ming_cheng",6,this.searchKey])
                }
                if(this.zheng_ce_lei_xing){
                    arr.push(["zheng_ce_lei_xing",0,this.zheng_ce_lei_xing])
                }
                if(this.guo_jia){
                    arr.push(["guo_jia",0,this.guo_jia])
                }
                if(this.bu_men){
                    arr.push(["bu_men",0,this.bu_men])
                }
                if(this.guan_jian_ci){
                    arr.push(["guan_jian_ci",6,this.guan_jian_ci])
                }
                if(this.ceng_ci){
                    arr.push(["ceng_ci",6,this.ceng_ci])
                }
                return arr;
            }
        },
        mounted() {
            this.$route.params.searchKey&&(this.searchKey=this.$route.params.searchKey)&&(this.title=this.$route.params.searchKey);

            let policies = document.querySelector('.policy-list .title');
            this.policies_height = policies.offsetTop;
            this.$Loading.finish();
            let option = {   
             tooltip: {  
                    trigger: 'item',  
                    formatter: function (params) {
                        if(!params.value) return;
                        return params.marker + params.seriesName + '<br/>' + params.name + ' : ' + params.value + '项';  
                    }  
                },       
                visualMap: {  
                    min: 0,  
                    max:1,  
                    text:['高','低'],  
                    bottom: 20,
                    left:20,
                    inRange: {
                        color: ['#eee','#2c7cd7']
                    },
                    seriesIndex: [0],
                    show:false
                },
                geo:{
                    map:'world',
                    zoom:1.2,
                    itemStyle: {
                        normal: {
                            borderColor: 'rgba(0,63,140,0.2)',
                            shadowColor: 'rgba(0,63,140,0.2)',
                            shadowOffsetY: 20,
                            shadowBlur: 20
                        }
                    },
                },
                series: [  
                    {  
                        name: '政策数',  
                        type: 'map',  
                        mapType: 'world',  
                        roam: false,   
                        zoom:1.2,
                        data:[
                            {name:'United States',value:18},
                            {name: 'China', value: 91},  
                            {name: 'Japan', value: 5},  
                            {name: 'France', value: 4},  
                            {name: 'United Kingdom', value: 9},  
                        ],
                        itemStyle: {
                            normal: {
                                areaColor: '#eaf2fc',
                                borderColor: '#bbb',
                                shadowColor: 'rgba(0,63,140,0.1)',
                                shadowOffsetY: 20,
                                shadowBlur: 30,
                                borderWidth: .5,
                            },
                        },
                    },{
                    name: 'Top 5',
                    type: 'scatter',
                    coordinateSystem: 'geo',
                    symbol:'pin',
                    symbolSize:70,
                    itemStyle: {
                        normal: {
                            color: 'orange', //标志颜色
                        }
                    },
                    zlevel: 6,
                    data: [{
                        name: "中国",
                        value: [104.091219,35.14072, 91]
                    }, {
                        name: '美国',
                        value: [-102.533494,39.905828, 18]
                    },{
                        name: '日本',
                        value: [137.693692,36.187987, 5]
                    },{
                        name: '法国',
                        value: [2.573268,47.511816, 4]
                    },{
                        name: '英国',
                        value: [-1.655431,52.977384, 9]
                    }],
                    tooltip:{
                        formatter:function(params){
                            return params.marker + '政策数'+ '<br>' + params.name + ' : ' + params.value[2] + '项';
                        }
                    },
                    label: {
                        normal: {
                            formatter: '{b}',
                            align: 'center',
                            verticalAlign: 'center',
                            show: true,
                            color: 'white',
                            fontWeight: 1000
                        }
                    }
                    }
                ]  
            };
            let chart = echarts.init(document.getElementById('map'));
            chart.setOption(option);
            window.onresize = () => {
                chart.resize();
            };


            //获取初始数据
            policyService.getTPolicyList({
                pageSize:6,
                pageNumber:this.pageNumber,
                filter:[["zheng_ce_ming_cheng",6,this.$route.params.searchKey||'']],
                order: [['chu_tai_shi_jian', 1]]
            }).then(res => {
                console.log(res)
                this.timeline = res.data;
                this.pageInfo = res.data;
                this.totalPages = res.total;
                this.loading = false;
            });
            
            //获取热点政策数据
            this.getRdzc();
        },
        methods: {
            showDrawer(){
                this.show = true;
                document.body.style.overflow = 'hidden';
            },
            hiddenDrawer(){
                this.show = false;
                document.body.style.overflow = 'scroll';
            },
            scrollTo(){
                console.log(1)
                window.scrollTo(0,this.policies_height - 100);
            },
            getData(){
                this.loading = true;
                let option = {
                    pageSize:6,
                    pageNumber:this.pageNumber,
                    filter:this.filter_params,
                    order: [['chu_tai_shi_jian', 1]]
                }
                policyService.getTPolicyList(option).then(res => {
                    this.pageInfo = res.data;
                    this.totalPages = res.total;
                    setTimeout(() => {
                        this.loading = false;
                    }, 500);
                });
            },
            getPageInfo(currentIndex){
                this.pageNumber = currentIndex;
                document.querySelectorAll('.readmore')[2].scrollIntoView(true);
                this.getData();
            },
            search(){
                this.title = this.searchKey;
                document.querySelectorAll('.readmore')[2].scrollIntoView(true);
                this.getData();
            },
            highlightHTML(html,search_key){
                return utils.highlightHTML(html,search_key);
            },
            //左侧筛选栏函数
            select(e,key,index){
                //处理CSS
                if(e.target.localName!='p') return;
                e.currentTarget.querySelectorAll('p').forEach(dom=>{
                    dom.classList.remove('select-active');
                })
                e.target.classList.add('select-active');
                console.log(e.target.innerHTML)
                //形成后端请求参数
                if(e.target.innerHTML!="全部"){
                    this[key] = e.target.innerHTML;
                    this.search();
                }
            },
            //获取热点政策
            getRdzc(){
                policyService.getTPolicyList({
                    filter:[["logo",11]]
                }).then(res => {
                    this.rdzc = res.data;
                    console.log(res.data)
                });
            },
            searchByTag(tag){
                this.title = tag;

                this.loading = true;
                let filter = this.filter_params;
                filter.push(['guan_jian_ci',6,tag]);
                let option = {
                    pageSize:6,
                    pageNumber:this.pageNumber,
                    filter:filter,
                    order: [['chu_tai_shi_jian', 1]]
                }
                policyService.getTPolicyList(option).then(res => {
                    this.pageInfo = res.data;
                    this.totalPages = res.total;
                    setTimeout(() => {
                        this.loading = false;
                    }, 500);
                });
            }
        },
    }
</script>

<style lang="scss" scoped>
    .pages{
        text-align: center;
        margin-left: -20%;
    }
    /deep/ .ivu-page-item,
    /deep/ .ivu-page-next,
    /deep/ .ivu-page-prev {
        margin-bottom: 10px;
    }

    .policy{
        background: rgb(250,250,250);
        overflow: hidden;
    }

    .search-div {
        margin-bottom: 70px;
    }

    .policy-container {
        padding: 10px 20px;
        padding-left: 0;
        padding-top: 0px;
        text-align: left;
        background: white;
        margin-top: -120px;
        width: 80%;
        margin-left:10%;
        margin-bottom: 50px;
        box-shadow: 1px 1.732px 60px 0px rgba(0, 0, 0, 0.1);
        position: relative;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        .left-footer{
            position: absolute;
            left: 0;
            bottom: 0;
            padding:15px 22px;
            background: var(--single-color);
            color: white;
            font-weight: bold;
            border-top-right-radius: 10px;
            border-bottom: 3px solid #eee;
            border-left: 3px solid #eee;
            box-shadow: 0 0 10px 0px rgb(182, 182, 182);
        }
        .policy-title {
            background: var(--single-color);
            box-shadow: 0 0 10px 0px #1b1b1b96;
            position: relative;
            color: white;
            margin-top: 20px;
            font-weight: normal;
            font-size: 16px;
            width: 150px;
            margin: auto;
            padding: 12px 20px;
            border-radius: 5px;
            font-weight: bold;
            transform: translateY(-35px);
            top: 0;
            z-index: 12;
            border-bottom: 5px solid #eee;
            text-align: center;
        }
        .s1{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }
        #map{
            width: 60%;
            // background: black;
            height: 450px;
        }
        .time{
            color: rgb(78, 173, 202);
            font-weight: bold;
        }
        /deep/ .ivu-tooltip-rel{
            color: #888;
        }
    }
    .rdzc{
        padding: 20px 10%;
        // background: #f8f4ef;
        background: #f6fbff;
        padding-bottom: 60px;
        .title{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 10px;
        }
        .rdzc-list{
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            margin-top: 50px;
            >div{
                width: 30%;
                padding-bottom: 20px;
                text-align: left;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                position: relative;
                box-shadow: 1px 1.732px 20px 0px rgba(0, 0, 0, 0.11);
                border-bottom-right-radius: 10px;
                border-bottom-left-radius: 10px;
                overflow: hidden;
                transition: all 0.2s ease;
                cursor: pointer;
                background: white;
                img{
                    width: 100%;
                    height: 200px;
                    margin-bottom: 10px;
                    object-fit: cover;
                    transition: transform 0.2s linear !important;
                }
                h2{
                    margin-top: 60px;
                    margin-bottom: 5px;
                    margin-left: 20px;
                    margin-right: 20px;
                    color: orange;
                }
                p{
                    color: #888;
                    margin-top: 5px;
                    margin-bottom: 5px;
                    margin-left: 20px;
                    margin-right: 20px;
                }
                .readmore{
                    width: 120px;
                    height: 40px;
                    background: var(--single-color);
                    color: white;
                    font-weight: bold;
                    margin-left: 20px;
                    margin-top: 10px;
                    margin-bottom: 10px;
                    border: none !important;
                    flex-shrink: 0;
                }
                .country{
                    position: absolute;
                    top: 200px;
                    background: var(--single-color);
                    border-radius: 5px;
                    padding: 10px 20px;
                    color: white;
                    font-weight: bold;
                    transform: translateY(-50%);
                    right: 20px;
                    border-bottom: 3px solid #eee;
                    box-shadow: 0 0 3px 0px #4b4b4b98;
                }
                .rdzc-btn{
                    position: absolute;
                    top: 200px;
                    background: var(--single-color);
                    border:none;
                    border-radius: 5px;
                    padding: 10px 20px;
                    color: white;
                    font-weight: bold;
                    transform: translateY(-50%);
                    left: 20px;
                    border-bottom: 4px solid #eee;
                    box-shadow: 0 0 3px 0px #4b4b4b98;
                    height: 50px;
                }
            }
            >div:hover img{
                transform: scale(1.1);
            }
            >div:hover{
                transform: translateY(-10px);
            }
            
        }
    }
    .drawer-icon{
        position: absolute;
        right: 20px;
        display: none;
    }
    .timeline p {
        cursor: pointer;
    }
    .policy-list{
        padding: 10px 10%;
        background: #ffffff;
        .title{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-top: 20px;
        }
        .policy-div{
            display: flex;
            flex-direction: row;
            >div:nth-of-type(1){
                text-align: left;
                width: 15%;
            }
        }
        .policy-select{
            flex-shrink: 0;
            >div{
                margin-bottom: 20px;
                transition-delay: 0s !important;
                animation-delay: 0s !important;
                p:nth-last-of-type(1){
                    margin-bottom: 0px !important;
                }
            }
            h2{
                font-size: 18px;
                color: #666;
                margin-bottom: 10px;
            }
            p{
                padding: 8px;
                cursor: pointer;
                font-size: 14px;
                margin-bottom: 2px;
            }
            p:hover{
                background: var(--single-color);
                color: #fff;
                border-radius: 3px;
            }
            .select-active{
                background: var(--single-color);
                color: #fff;
                border-radius: 3px;
            }
        }
        .policy-content{
            margin-left: 30px;
            text-align: left;
            >div{
                margin-bottom: 20px;
            }
            >div>div{
                color: #888;
                margin-top: 10px;
                margin-bottom: 10px;
                span{
                    margin-right: 50px;
                }
            }
            >div>div:nth-of-type(1){
                font-weight: bold;
                font-size: 18px;
                color: #4eadca;
            }
            .title-span{
                display: inline-block;
                font-size: 12px;
                font-weight: normal;
                border: 1px solid rgba(210,191,134,0.5);
                color: #C19A26;
                font-weight: 500;
                background: linear-gradient(to right, rgba(253,235,144,0.5), rgba(238,218,160,0.5));
                padding: 4px 10px;
                vertical-align: middle;
                border-radius: 3px;
                cursor: pointer;
                transform: translateY(-2px);
                vertical-align: bottom;
            }
            .title-span::after {
                content: '';
                display: inline-block;
                position: absolute;
                left: 0;
                width: 100%;
                height: 100%;
                // background: url(../assets/flash.gif) no-repeat center;
                background-size: contain;
                opacity: 0.6;
                top: 0;
            }
            .policy-keyword{
                button{
                    margin-right: 10px;
                    padding: 0px 13px;
                    font-size: 12px;
                }
            }
            .policy-line1{
                color: orange;
                span{
                    display:inline-block
                }
            }
            .policy-line2{
                span{
                    display:inline-block
                }
            }
        }
    }
    
    @media (max-width:1060px) {
        .policy {
            .policy-container{
                width: 96%;
                margin-left: 2%;
                padding: 10px 20px;
                .policy-title{
                    transform: translateY(-40px);
                }
                .s1{
                flex-direction: column;
                }
                #map{
                    width: 100%;
                    height: 250px;
                }
                .left-footer{
                    display: none;
                }
            }
            .rdzc{
                padding: 20px 3%;
                .rdzc-list{
                    flex-direction: column;
                    >div{
                        width: 100% !important;
                        margin-bottom: 10px;
                    }   
                }
            }
            .policy-list{
                padding: 20px 3%;
            }
            .policy-select{
                display: none;
                position: fixed;
                height: 100vh;
                top: 0;
                left: 0;
                width: 100vw !important;
                background: rgba(0, 0, 0, 0.363);
                z-index: 999;
                overflow: scroll !important;
                >div{
                    width: 80%;
                    padding-left: 20px;
                    padding-top: 20px;
                    margin-bottom: 0;
                    background: white;
                    padding-right: 40px;
                }
            }
            .policy-content{
                margin-left: 0;
            }
            /deep/ .pages{
                margin: 0;
            }
            .drawer-icon{
                display: block;
            }
        }
    }
</style>